<template>
	<view class="page">
		<u-navbar autoBack :placeholder="true">
			<template #center>
				<u-text suffixIcon="arrow-down-fill" align="center" text="李同学" size="32rpx" color="#333"
					@click="showPopupBox = true"></u-text>
			</template>
		</u-navbar>
		<!-- 科目选择和拍照按钮 -->
		<view class="subject-box">
			<text class="subject-item" v-for="item in subjectList" :key="item.id"
				:class="{ active: currentSubject === item.id }" @click="currentSubject = item.id">
				<text>{{ item.name }}</text>
			</text>
		</view>
		<view class="main padding-0">
			<!-- 错题列表 -->
			<view class="wrong-question-list">
				<view class="wrong-question-item" v-for="(item, index) in wrongQuestionList" :key="item.id">
					<view class="flex justify-between align-center">
						<u-text bold color="#333" size="32rpx" :text="`错题${index + 1}`"></u-text>
					</view>
					<view class="margin-top-sm">
						<image :src="item.url" mode="aspectFit" style="width: 100%;"></image>
					</view>
					<view class="margin-top-sm">
						<u-text color="#333" size="24rpx" text="知识点 正在加载中" v-if="item.knowledge.length === 0"></u-text>
						<template v-else>
							<view v-for="(knowledge, index) in item.knowledge" :key="knowledge.id">
								<u-text margin="20rpx 0 0 0" color="#333" size="28rpx" :text="`知识点${index + 1}`"></u-text>
								<view class="knowledge-item">
									<view>
										<u-text color="#333" size="28rpx" :text="knowledge.name"
											v-if="currentKnowledge?.id !== knowledge.id"></u-text>
										<u-input :focus="true" customStyle="background:white;height:60rpx" v-model="knowledge.name"
											placeholder="请输入知识点名称" v-else />
									</view>
									<view class="flex align-center gap-sm">
										<u-icon size="24" color="#999" name="edit-pen" @click="handleEditKnowledge(knowledge)"
											v-if="currentKnowledge?.id !== knowledge.id"></u-icon>
										<u-icon size="24" color="#999" name="checkmark" @click="handleSaveKnowledge(knowledge)"
											v-else></u-icon>
										<u-icon size="18" color="#999" name="/static/icon/icon-trash.png"
											@click="todoDeleteKnowledge(knowledge)"></u-icon>
									</view>
								</view>
							</view>
						</template>
					</view>
					<view class="btn-add-knowledge" v-if="item.knowledge.length" @click="handleSaveWrongQuestion">
						<u-icon size="26rpx" color="#0060E6" name="plus"></u-icon>
						<text>新增知识点</text>
					</view>
				</view>
			</view>

			<u-modal :show="showDeleteKnowledgeModal" title="删除知识点" :showCancelButton="true" @confirm="handleDeleteKnowledge"
				@cancel="handleCancelDeleteKnowledge">
			</u-modal>
			<PopupBox :show="showPopupBox" :top="40" @close="showPopupBox = false">
				<view class="popup-item" v-for="i in 10" :key="i">
					<u-text text="李同学" size="32rpx" color="#333"></u-text>
					<u-text align="right" text="待确认：6题" size="32rpx" color="#333"></u-text>
				</view>
			</PopupBox>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import PopupBox from '@/components/PopupBox/index.vue';

const showPopupBox = ref(false);

const currentSubject = ref(1);//当前科目
const currentEditKnowledge = ref(null);//当前编辑知识点
const currentDeleteKnowledge = ref(null);//当前删除知识点
const currentWrongQuestion = ref(null);//当前错题
//删除知识点确认弹窗
const showDeleteKnowledgeModal = ref(false);
//科目列表
const subjectList = ref([
	{
		id: 1,
		name: '语文'
	},
	{
		id: 2,
		name: '数学'
	},
	{
		id: 3,
		name: '英语'
	}
]);
//错题列表
const wrongQuestionList = ref([
	{
		id: 1,
		url: '/static/image/img-math-bg.png',
		knowledge: [{
			id: 1,
			name: '10以内加减法',
		}, {
			id: 2,
			name: '10以内加减法',
		}, {
			id: 3,
			name: '10以内加减法',
		}],
	},
	{
		id: 2,
		url: '/static/image/img-math-bg.png',
		knowledge: [],
	}
]);

//编辑知识点
const handleEditKnowledge = (knowledge) => {
	currentEditKnowledge.value = knowledge;
}

//删除知识点
const todoDeleteKnowledge = (knowledge) => {
	showDeleteKnowledgeModal.value = true;
	currentDeleteKnowledge.value = knowledge;
}

//取消删除知识点
const handleCancelDeleteKnowledge = () => {
	showDeleteKnowledgeModal.value = false;
	currentDeleteKnowledge.value = null;
}

//删除知识点
const handleDeleteKnowledge = () => {
	wrongQuestionList.value = wrongQuestionList.value.filter(item => item.id !== currentDeleteKnowledge.value.id);
	showDeleteKnowledgeModal.value = false;
	currentDeleteKnowledge.value = null;
}

//保存知识点
const handleSaveKnowledge = () => {
	wrongQuestionList.value = wrongQuestionList.value.map(item => {
		if (item.id === currentEditKnowledge.value.id) {
			return currentEditKnowledge.value;
		}
		return item;
	});
	currentEditKnowledge.value = null;
}

</script>
<style scoped lang="scss">
.subject-box {
	background: white;
	padding: 20rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: solid 1px #eee;
}

.wrong-question-list {
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 20rpx;
}

.wrong-question-item {
	background: white;
	border-radius: 32rpx;
	margin-bottom: 30rpx;
	padding: 30rpx;
}

.subject-item {
	padding: 10rpx 40rpx;
	border-radius: 50rpx;
	margin-right: 20rpx;
	font-size: 28rpx;
	color: #666;

	&.active {
		background: #0060E6;
		color: white;
	}
}

.knowledge-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f7f7f7;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}

.btn-add-knowledge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EBF3FF;
	border-radius: 50rpx;
	padding: 20rpx;
	margin-top: 40rpx;
	color: #0060E6;
	gap: 10rpx;
}

.popup-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	border-bottom: solid 1px #eee;
}
</style>